<template>
  <el-dialog v-model="dialogFormVisible" title="修改密码" @close="closeDialog">
    <el-form :model="addAppForm" ref="addAppRef" :rules="addApprules">
      <el-form-item
        label="原始密码"
        :label-width="formLabelWidth"
        prop="password"
      >
        <el-input
          v-model="addAppForm.password"
          autocomplete="off"
          type="password"
          placeholder="请填写原始密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword">
        <el-input
          v-model="addAppForm.newPassword"
          autocomplete="off"
          placeholder="请输入新密码"
          type="password"

        ></el-input>
      </el-form-item>
      <el-form-item
        label="确认密码"
        :label-width="formLabelWidth"
        prop="newPasswordAgain"
      >
        <el-input
          v-model="addAppForm.newPasswordAgain"
          autocomplete="off"
          type="password"

          placeholder="请再次输入新密码"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script >
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";

import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, ElMessage },

  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      addAppForm: {
        newPasswordAgain: "",
        password: "",
        newPassword: "",
      },
      // 校验规则
      addApprules: {
        newPasswordAgain: vxRule(true, null, "blur"),
        password: vxRule(true, null, "blur"),
        newPassword: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getAppDataById(id) {
      httpService("/javaApi/appInfo/queryById", { id: id }, "get").then((data) => {
        this.addAppForm = data.object;
        this.addAppForm.type = String(this.addAppForm.type);
        let obj = new Object();
        //回显图片
        if (this.addAppForm.icon != "" && this.addAppForm.icon != null) {
          obj.url = this.addAppForm.icon;
          this.$refs.addImage.pushImage(obj);
          this.$refs.addImage.hideUpload = true;
        }
      });
    },
    clear() {
      this.dialogFormVisible = false;
      this.addAppForm.password = "";
      this.addAppForm.newPassword = "";
      this.addAppForm.newPasswordAgain = "";
    },
    save() {
      this.$refs.addAppRef.validate((valid) => {
        if (valid) {
          if(this.addAppForm.newPassword!=this.addAppForm.newPasswordAgain){
            ElMessage.error("新密码和确认密码输入不一致");
            return;
          }
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("password", this.addAppForm.password);
          params.append("newPassword", this.addAppForm.newPassword);
          let config = { "Content-Type": "multipart/form-data" };
            httpService("/javaApi/baseTeacher/changePassword", params, "post", config).then((data) => {
              if (data.code == 200) {
                ElMessage.success(data.message);
                this.clear();
                this.close();
              } else {
                ElMessage.error(data.message);
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}
.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
.el-input { 
    margin: 0 ;
}
</style>